const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractPlugin = require('extract-text-webpack-plugin') // 用来把样式提取成一个单独文件

const isDev = process.env.NODE_ENV === 'development'


const config = {
    target: 'web',
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        filename : 'bundle.[hash:8]js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader'
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [
                    {
                        loader: 'url-loader',//->base64 -> js 使用import在js中引入图片
                        options: {
                            limit: 1024,//小于1024就写入js
                            name: '[name]-[hash].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),//定义webpack变量，js中也可以使用process.env，webpack会处理赋值
        new HTMLPlugin()//webpack把入口hmtl中得js加载进去，自动成成一个index.html
    ]
}

if(isDev){
    config.module.rules.push({
        test: /\.styl$/,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'postcss-loader',
                options:{// 提示postcss前面loader已经生成了sourceMap
                    sourceMap: true
                }
            },
            'stylus-loader'//从下向上处理；stylus -> css
        ]
    })
    config.devtool = '#cheap-module-eval-source-map'//sourcemap的映射方式设置
    config.devServer = {
        port: 8000,
        host: '0.0.0.0', //可以通过本机内网ip进行访问
        overlay: {
            errors: true //错误都显示在页面上
        },
        // historyFallback: {
             // 把不认识得路由，转到index
        // },
        hot: true//hot replacement
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(), // 热替换需要的插件
        new webpack.NoEmitOnErrorsPlugin() // 错误信息直接输出到页面
    )
} else {
    config.entry = {
        app: path.join(__dirname, 'src/index.js'),
        vendor: ['vue']
    }
    config.module.rules.push(
        {
            test: /\.styl$/,
            use: ExtractPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options:{// 提示postcss前面loader已经生成了sourceMap
                            sourceMap: true
                        }
                    },
                    'stylus-loader'//从下向上处理；stylus -> css
                ]
            })
        }
    )
    config.plugins.push(
        new ExtractPlugin('styles.[contentHash:8].css'),
        new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}), // 处理运行时依赖，vue。较少改动可以长缓存
        new webpack.optimize.CommonsChunkPlugin({name: 'runtime'}) // 处理webpack生成的运行时代码，里面标记了各个代码模块的序号（跟生成顺序有关）；
        // 单独打包此文件，可以确保之前编写的代码模块对应的生成的webpack运行时代码中模块编号不变，利于实现长缓存
    )
    config.output.filename = '[name].[chunkhash:8].js' //chunkhash每个entry打包出的文件都有一个独立的hash，hash是所有的打包文件都会用同一个hash
    //此处一定是chunkhash,因为用hash时app和vendor的hash码是一样的了,这样每次业务代码更新,vendor也会更新,也就没有了意义.
}

module.exports = config